<template>
  <view class="add-container">
    <uni-forms ref="form" :modelValue="formData" :rules="rules">
      <!-- 商品名称 -->
      <uni-forms-item label="商品名称" required name="name">
        <input 
          v-model="formData.name" 
          placeholder="请输入红木家具名称" 
          class="form-input"
        />
      </uni-forms-item>
      
      <!-- 商品图片 -->
      <uni-forms-item label="商品图片" required name="image">
        <uni-file-picker 
          v-model="formData.image"
          fileMediatype="image"
          mode="grid"
          limit="5"
          :image-styles="imageStyles"
        />
      </uni-forms-item>
      
      <!-- 价格 -->
      <uni-forms-item label="价格(元)" required name="price">
        <input 
          v-model="formData.price" 
          type="digit" 
          placeholder="请输入价格" 
          class="form-input"
        />
      </uni-forms-item>
      
      <!-- 库存数量 -->
      <uni-forms-item label="库存数量" required name="stock">
        <input 
          v-model="formData.stock" 
          type="number" 
          placeholder="请输入库存数量" 
          class="form-input"
        />
      </uni-forms-item>
      
      <!-- 材质 -->
      <uni-forms-item label="材质" required name="material">
        <uni-data-select 
          v-model="formData.material" 
          :localdata="materialOptions"
          placeholder="请选择材质"
        />
      </uni-forms-item>
      
      <!-- 分类 -->
      <uni-forms-item label="分类" name="category">
        <uni-data-select 
          v-model="formData.category" 
          :localdata="categoryOptions"
          placeholder="请选择分类"
        />
      </uni-forms-item>
      
      <!-- 详细描述 -->
      <uni-forms-item label="详细描述" name="description">
        <textarea 
          v-model="formData.description" 
          placeholder="请输入商品详细描述..." 
          class="form-textarea"
        />
      </uni-forms-item>
      
      <button type="primary" class="submit-btn" @click="submitForm">提交</button>
    </uni-forms>
  </view>
</template>

<script>
const db = uniCloud.database();

export default {
  data() {
    return {
      formData: {
        name: '',
        image: [],
        price: null,
        stock: 0,
        material: '',
        category: '',
        description: '',
        status: 1
      },
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '商品名称不能为空'
          }]
        },
        image: {
          rules: [{
            required: true,
            errorMessage: '请上传商品图片'
          }]
        },
        price: {
          rules: [{
            required: true,
            errorMessage: '价格不能为空'
          }, {
            minimum: 1,
            errorMessage: '价格必须大于0'
          }]
        },
        stock: {
          rules: [{
            required: true,
            errorMessage: '库存数量不能为空'
          }, {
            minimum: 0,
            errorMessage: '库存不能为负数'
          }]
        },
        material: {
          rules: [{
            required: true,
            errorMessage: '请选择材质'
          }]
        }
      },
      materialOptions: [
        { value: '紫檀', text: '紫檀' },
        { value: '黄花梨', text: '黄花梨' },
        { value: '酸枝木', text: '酸枝木' },
        { value: '鸡翅木', text: '鸡翅木' },
        { value: '金丝楠', text: '金丝楠' },
        { value: '乌木', text: '乌木' },
        { value: '其他', text: '其他' }
      ],
      categoryOptions: [
        { value: '椅子', text: '椅子' },
        { value: '桌子', text: '桌子' },
        { value: '柜子', text: '柜子' },
        { value: '床榻', text: '床榻' },
        { value: '屏风', text: '屏风' },
        { value: '摆件', text: '摆件' },
        { value: '其他', text: '其他' }
      ],
      imageStyles: {
        width: 160,
        height: 160,
        border: {
          color: '#8B4513',
          width: 1,
          style: 'dashed',
          radius: '4px'
        }
      }
    };
  },
  methods: {
    async submitForm() {
      try {
        // 验证表单
        await this.$refs.form.validate();
        
        // 上传图片到云存储
        const uploadedImages = [];
        for (const file of this.formData.image) {
          const res = await uniCloud.uploadFile({
            filePath: file,
            cloudPath: `furniture/${Date.now()}-${Math.random().toString(36).substr(2, 6)}.jpg`
          });
          uploadedImages.push(res.fileID);
        }
        
        // 构建商品数据
        const productData = {
          ...this.formData,
          image: uploadedImages,
          create_date: Date.now()
        };
        
        // 保存到数据库
        const result = await db.collection('furniture_inventory').add(productData);
        
        if (result.result.id) {
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          });
          
          // 返回库存列表
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      } catch (e) {
        uni.showToast({
          title: '添加失败: ' + e.message,
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss">
.add-container {
  padding: 30rpx;
  background-color: #f9f5f0;
  min-height: 100vh;
  
  .form-input, .form-textarea {
    background-color: white;
    border-radius: 8rpx;
    padding: 20rpx;
    border: 1px solid #e8e8e8;
  }
  
  .form-textarea {
    height: 200rpx;
  }
  
  .submit-btn {
    background-color: #8B4513;
    color: white;
    margin-top: 40rpx;
    border-radius: 50rpx;
    height: 80rpx;
    line-height: 80rpx;
  }
}
</style>